
<!--conf-->
<!-- footer-->
<!-- com-title--><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link href="../../../lib/weui/weui.css" rel="stylesheet"/>
    <link href="../../scss/main.css" rel="stylesheet"/>
    <script src="../../../lib/weui/weui.js"></script>
    <link type="image/x-icon" href="https://on5ngaon4.bkt.clouddn.com/Mountain_64px_1120233_easyicon.net.ico" rel="shortcut icon"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>校车查询</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body></body>
  <div id="bus">
    <div class="weui-cells__title">切换车型</div>
    <div class="weui-cells">
      <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">切换到教师班车</div>
        <div class="weui-cell__ft">
          <input type="checkbox" class="weui-switch">
        </div>
      </div>
    </div>
    <div class="weui-cells__title">切换时间</div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label for="" class="weui-label">时间</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select">
            <option>周一，周二，周三，周四</option>
            <option>周五</option>
            <option>周六</option>
            <option>周日</option>
          </select>
        </div>
      </div>
    </div>
    <div class="weui-cells__title">班次列表</div>
    <div class="container">
      <div class="card">
        <div id="am" class="weui-flex">
          <div class="weui-flex__item">
            <div class="time">上午</div>
          </div>
        </div>
        <div id="pm" class="weui-flex">
          <div class="weui-flex__item">
            <div class="time">下午</div>
          </div>
        </div>
        <div class="weui-flex">
          <div class="weui-flex__item">出发30分钟后 首义路c出口 返程，5元/人</div>
        </div>
      </div>
    </div>
    <script>
      var switchbus = document.getElementsByClassName("weui-switch")[0];
      
      switchbus.onclick = function () {
          window.location.href = "teacher.html";
      }
      
    </script>
    <script>
      // 获取select, option Dom
      var week_select = document.getElementsByTagName("select")[0];
      var week_option = week_select.getElementsByTagName("option");
      
      function busTime() {
          // 获取显示的am，pm 列表
          var time_am = document.getElementById("am");
          var time_pm = document.getElementById("pm");
      
          // 获取显示的am，pm 列表
          var item_am_item = time_am.getElementsByClassName("weui-flex__item");
          var item_pm_item = time_pm.getElementsByClassName("weui-flex__item");
      
          // 清空am, pm 数据
          while (Boolean(item_am_item[1])) {
              time_am.removeChild(item_am_item[1]);
          }
          while (Boolean(item_pm_item[1])) {
              time_pm.removeChild(item_pm_item[1]);
          }
      
      
          //数据渲染 am, pm
          for (var i = 0; i < (time[getWeekNum()].am.length); i++) {
              var para = document.createElement("div");
              para.setAttribute("class", "weui-flex__item")
              var node = document.createTextNode(time[getWeekNum()].am[i]);
      
              para.appendChild(node);
              time_am.appendChild(para);
          }
      
          for (var i = 0; i < (time[getWeekNum()].pm.length); i++) {
              var para = document.createElement("div");
              para.setAttribute("class", "weui-flex__item")
              var node = document.createTextNode(time[getWeekNum()].pm[i]);
      
              para.appendChild(node);
              time_pm.appendChild(para);
          }
      }
      
      // 获取用户选择位置 0-周一-四 1-周五 2- 周六 3-周日
      function getWeekNum() {
          week_select__value = week_select.selectedIndex;
          week_option[week_select__value] = true;
          return week_select__value;
      }
      
      
      // 依据默认时间矫正当前星期
      function defaultWeek() {
          // 获取当前 星期几
          var week_now = new Date().getDay();
      
          switch (week_now) {
              case 1, 2, 3, 4:
                  week_option[0].selected = true;
                  break;
              case 5:
                  week_option[1].selected = true;
                  break;
              case 6:
                  week_option[2].selected = true;
                  break;
              case 0:
                  week_option[3].selected = true;
                  break;
          }
      }
      
      window.onload = function () {
          //根据当前日期确定时间
          defaultWeek();
          //渲染当前数据
          busTime();
      
          week_select.onchange = function () {
              getWeekNum();
              busTime();
          }
      }
      
    </script>
    <script>
      time = {
          "0": {
              "am": ["8:30", "10:30"],
              "pm": ["12:30", "15:30", "17:30"]
          },
          "1": {
              "am": ["8:30", "9:30", "10:30", "11:30"],
              "pm": ["12:30", "13:30", "14:30", "15:30", "16:30", "17:30"]
          },
          "2": {
              "am": ["8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30"],
              "pm": ["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
          },
          "3": {
              "am": ["8:30", "9:30", "10:30", "11:30"],
              "pm": ["13:00", "14:00", "15:00", "16:00", "17:00"]
          }
      }
      
    </script>
    <div class="weui-cells__title">校车位置</div>
    <div class="container">
      <div id="wrap" class="my-map">
        <div id="mapContainer"></div>
      </div>
    </div>
    <script src="https://webapi.amap.com/maps?v=1.4.0&amp;key=ccd246a376313ca38a649a9edd48131c"></script>
    <script>
      !function () {
          var infoWindow, map, level = 15,
      
              center = {
                  lng: 114.296115,
                  lat: 30.441589
              },
      
              // 标记及路线图
              features = [{
                  type: "Polygon",
                  name: "乘车点",
                  desc: "校南门，陈一丹伉俪图书馆附近",
                  strokeWeight: 2,
                  strokeColor: "#F0202F",
                  strokeOpacity: 1,
                  fillColor: "red",
                  fillOpacity: 0.2,
                  lnglat: [{
                      lng: 114.295093,
                      lat: 30.4391
                  }, {
                      lng: 114.295088,
                      lat: 30.438462
                  }, {
                      lng: 114.295646,
                      lat: 30.438467
                  }, {
                      lng: 114.295635,
                      lat: 30.439096
                  }]
              },
                  {
                      type: "Marker",
                      name: "绿迪校车",
                      desc: "校园巴士，30分钟后返程，5元/人",
                      color: "red",
                      icon: "pot",
                      offset: {
                          x: -11,
                          y: -26
                      },
                      lnglat: {
                          lng: 114.295335,
                          lat: 30.438846
                      }
                  },
                  {
                      type: "Marker",
                      name: "307公交站",
                      desc: "",
                      color: "blue",
                      icon: "pot",
                      offset: {
                          x: -11,
                          y: -26
                      },
                      lnglat: {
                          lng: 114.30005,
                          lat: 30.440266
                      }
                  },
                  {
                      type: "Marker",
                      name: "首义路c出口",
                      desc: "超市门口返程",
                      color: "red",
                      icon: "cir",
                      offset: {
                          x: -9,
                          y: -31
                      },
                      lnglat: {
                          lng: 114.31052,
                          lat: 30.533175
                      }
                  },
                  {
                      type: "Polygon",
                      name: "终点站",
                      desc: "首义路c出口，到达即返程。",
                      strokeWeight: 2,
                      strokeColor: "#19A4EB",
                      strokeOpacity: 1,
                      fillColor: "red",
                      fillOpacity: 0.7,
                      lnglat: [{
                          lng: 114.310397,
                          lat: 30.533387
                      }, {
                          lng: 114.310343,
                          lat: 30.533027
                      }, {
                          lng: 114.310703,
                          lat: 30.532976
                      }, {
                          lng: 114.310756,
                          lat: 30.533355
                      }]
                  },
                  {
                      type: "Polyline",
                      name: "往返路线",
                      desc: "",
                      strokeWeight: 5,
                      strokeColor: "#F0202F",
                      strokeOpacity: 0.77,
                      lnglat: [{
                          lng: 114.295415,
                          lat: 30.43866
                      }, {
                          lng: 114.295415,
                          lat: 30.438231
                      }, {
                          lng: 114.299234,
                          lat: 30.438342
                      }, {
                          lng: 114.300736,
                          lat: 30.441783
                      }, {
                          lng: 114.300865,
                          lat: 30.44378
                      }, {
                          lng: 114.299148,
                          lat: 30.451476
                      }, {
                          lng: 114.298805,
                          lat: 30.455249
                      }, {
                          lng: 114.298805,
                          lat: 30.455915
                      }, {
                          lng: 114.292024,
                          lat: 30.458949
                      }, {
                          lng: 114.293226,
                          lat: 30.461242
                      }, {
                          lng: 114.293355,
                          lat: 30.462167
                      }, {
                          lng: 114.293441,
                          lat: 30.46446
                      }, {
                          lng: 114.29314,
                          lat: 30.477813
                      }, {
                          lng: 114.282325,
                          lat: 30.477739
                      }, {
                          lng: 114.279193,
                          lat: 30.478368
                      }, {
                          lng: 114.275931,
                          lat: 30.480106
                      }, {
                          lng: 114.285544,
                          lat: 30.494233
                      }, {
                          lng: 114.295758,
                          lat: 30.50492
                      }, {
                          lng: 114.299062,
                          lat: 30.510836
                      }, {
                          lng: 114.300436,
                          lat: 30.518119
                      }, {
                          lng: 114.301122,
                          lat: 30.518969
                      }, {
                          lng: 114.301509,
                          lat: 30.51945
                      }, {
                          lng: 114.302109,
                          lat: 30.519524
                      }, {
                          lng: 114.304813,
                          lat: 30.51982
                      }, {
                          lng: 114.309019,
                          lat: 30.52189
                      }, {
                          lng: 114.310564,
                          lat: 30.52274
                      }, {
                          lng: 114.312237,
                          lat: 30.523701
                      }, {
                          lng: 114.306787,
                          lat: 30.525439
                      }, {
                          lng: 114.30919,
                          lat: 30.533497
                      }, {
                          lng: 114.310564,
                          lat: 30.533276
                      }]
                  },
                  {
                      type: "Marker",
                      name: "灵吴墩",
                      desc: "万能中转公交站",
                      color: "blue",
                      icon: "pot",
                      offset: {
                          x: -11,
                          y: -26
                      },
                      lnglat: {
                          lng: 114.276523,
                          lat: 30.480787
                      }
                  }
              ];
      
      
          function loadFeatures() {
              for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
                  data = features[i];
                  switch (data.type) {
                      case "Marker":
                          feature = new AMap.Marker({
                              map: map,
                              position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                              zIndex: 3,
                              extData: data,
                              offset: new AMap.Pixel(data.offset.x, data.offset.y),
                              title: data.name,
                              content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
                          });
                          break;
                      case "Polyline":
                          for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                              path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                          }
                          feature = new AMap.Polyline({
                              map: map,
                              path: path,
                              extData: data,
                              zIndex: 2,
                              strokeWeight: data.strokeWeight,
                              strokeColor: data.strokeColor,
                              strokeOpacity: data.strokeOpacity
                          });
                          break;
                      case "Polygon":
                          for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                              path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                          }
                          feature = new AMap.Polygon({
                              map: map,
                              path: path,
                              extData: data,
                              zIndex: 1,
                              strokeWeight: data.strokeWeight,
                              strokeColor: data.strokeColor,
                              strokeOpacity: data.strokeOpacity,
                              fillColor: data.fillColor,
                              fillOpacity: data.fillOpacity
                          });
                          break;
                      default:
                          feature = null;
                  }
                  if (feature) {
                      AMap.event.addListener(feature, "click", mapFeatureClick);
                  }
              }
          }
      
          function mapFeatureClick(e) {
              if (!infoWindow) {
                  infoWindow = new AMap.InfoWindow({
                      autoMove: true
                  });
              }
              var extData = e.target.getExtData();
              infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
              infoWindow.open(map, e.lnglat);
          }
      
          map = new AMap.Map("mapContainer", {
              center: new AMap.LngLat(center.lng, center.lat),
              level: level
          });
          loadFeatures();
          /*
          //定位组件
          map.plugin('AMap.Geolocation', function () {
              geolocation = new AMap.Geolocation({
                  enableHighAccuracy: true,//是否使用高精度定位，默认:true
                  timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                  buttonOffset: new AMap.Pixel(8, 10),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                  buttonPosition: 'RB'
              });
      
              map.addControl(geolocation);
              geolocation.getCurrentPosition();
              AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
              AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
          });
      
          //解析定位结果
          function onComplete(data) {
              var str = ['定位成功'];
              str.push('经度：' + data.position.getLng());
              str.push('纬度：' + data.position.getLat());
              if (data.accuracy) {
                  str.push('精度：' + data.accuracy + ' 米');
      
              }//如为IP精确定位结果则没有精度信息
              str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
              document.getElementById('tip').innerHTML = str.join('<br>');
          }
      
          //解析定位错误信息
          function onError(data) {
              document.getElementById('tip').innerHTML = '定位失败';
          }
          */
      }();
      
      
    </script>
    <footer class="weui-footer">
      <div>
        <p><a href="../102.data/index.html" class="weui-footer__link">版本日志</a><a href="../101.message/index.html" class="weui-footer__link">留言反馈</a></p>
      </div>
      <div>
        <p class="ueui-footer__text">Copyright &copy; 2017 信息中心</p>
      </div>
    </footer>
  </div>
</html>